<template>
  <view class="wrap">
    <view v-if="!finishSport">
      <view class="sports-list">
        <view class="spors-item" v-for="(item, index) in sportTaskList" :key="index">
          <text :class="['iconfont', 'sports-img-icon', matchSportIcon(item.sportName)]" />
          <view>
            <view class="sports-name">
              <text class="sports-label">{{ item.sportName }}</text>
            </view>
            <view class="sports-cycle">
              <text class="sports-text sports-num">{{ item.duration }}</text>
              <text class="sports-text">分钟</text>
            </view>
          </view>
        </view>
      </view>
      <view class="fixed" @tap="nextSport">
        <button class="fix-btn">下一步 {{ todayDate === options.date ? '开始拉伸' : '' }}</button>
      </view>
    </view>

    <view class="sports-result" v-else>
      <view class="sports-result-content">
        <image
          class="sports-result-desc"
          src="https://ainengli.hzjrsw.com/jkhx/common/sports-result-desc.png"
          mode="scaleToFill"
        />
        <text class="sports-desc"> 恭喜你，完成了有氧运动！ </text>
      </view>
      <view class="sprots-btn-box" @tap="startNextSport">
        <button class="fix-btn">开始拉伸</button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getSportsPlanDetail, completeSportsPlan, saveSportsPlanDetail } from './sportsPlan.api'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { parseTime } from '@/utils/tools'

const finishSport = ref(false)
const sportTaskList = ref<any>([])
const options = reactive({
  date: '',
  taskId: '',
  sportType: '',
  hasFinish: 0,
  sportId: '',
  planId: ''
})
const todayDate = parseTime(new Date(), '{y}-{m}-{d}')

onLoad((option) => {
  if (option) {
    options.date = option.date
    options.taskId = option.taskId
    options.sportType = option.sportType
    options.hasFinish = option.hasFinish
    options.sportId = option.sportId
    options.planId = option.planId
  }
})

onShow(() => {
  sportTaskList.value = []
  getSportsPlanDetail({
    taskId: options.taskId
  }).then((res: any) => {
    sportTaskList.value = res.data.filter((vo) => vo.sportType === '1')
  })
})

const startNextSport = () => {
  uni.navigateTo({
    url: `/module/src/pages/sports/sportsPlan/stretching?date=${options.date}&taskId=${options.taskId}&sportType=${options.sportType}&hasFinish=${options.hasFinish}&sportId=${options.sportId}&planId=${options.planId}`
  })
}

const nextSport = () => {
  if (todayDate === options.date) {
    const taskIds = sportTaskList.value.map((vo) => vo.taskDetailId)
    const data = sportTaskList.value.map((vo) => {
      return {
        empi: vo.empi,
        taskId: vo.taskId,
        taskDetailId: vo.taskDetailId,
        sportType: vo.sportType,
        sportId: vo.sportId,
        sportName: vo.sportName,
        duration: vo.duration,
        actionNum: vo.actionNum
      }
    })
    saveSportsPlanDetail(data).then(() => {
      completeSportsPlan(taskIds).then(() => {
        startNextSport()
        // finishSport.value = true
      })
    })
  } else {
    startNextSport()
  }
}

const matchSportIcon = (name: string) => {
  switch (name) {
    case '跑步':
      return 'icon-paobu'
    case '游泳':
      return 'icon-youyong'
    case '瑜伽':
      return 'icon-yujia'
    case '椭圆机':
      return 'icon-tuoyuanji'
    case '骑行':
      return 'icon-qihang'
    case '健步走':
      return 'icon-jianbuzou'
    case '篮球':
      return 'icon-lanqiu'
    case '足球':
      return 'icon-zuqiu'
    case '羽毛球':
      return 'icon-yumaoqiu'
    case '乒乓球':
      return 'icon-pingpangqiu'
    case '排球':
      return 'icon-paiqiu'
    case '户外跑':
      return 'icon-huwaipao'
    case '八段锦':
      return 'icon-baduanjin'
    case '太极拳':
      return 'icon-taijiquan'
    case '跳绳':
      return 'icon-tiaosheng'
    case '跑步机':
      return 'icon-paobuji'
    case '功率自行车':
      return 'icon-gongshuaizihangche'
    case '划船机':
      return 'icon-huachuanji'
    case '登山':
      return 'icon-dengshan'
    case '抗阻':
      return 'icon-kangzu'
    case '网球':
      return 'icon-wangqiu'
    case '跳广场舞':
      return 'icon-tiaoguangchangwu'
    case '运动':
      return 'icon-yundong'
    default:
      return ''
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  padding: 32rpx 32rpx 188rpx 32rpx;
  position: relative;
  height: 100vh;

  .sports-list {
    width: 100%;
    height: 100%;
    overflow: hidden auto;

    .spors-item {
      width: 100%;
      height: 164rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx;
      margin-bottom: 32rpx;
      display: flex;
      flex-direction: row;

      .sports-img-icon {
        width: 98rpx;
        height: 96rpx;
        margin-right: 32rpx;
      }

      .sports-name {
        margin-bottom: 8rpx;
        .sports-label {
          font-weight: 600;
          font-size: 36rpx;
          color: #222222;
        }
      }

      .sports-text {
        font-weight: 500;
        font-size: 30rpx;
        color: #666;
      }
      .sports-num {
        color: #222;
        font-weight: 600;
      }
    }

    .spors-item:last-child {
      margin-bottom: 0;
    }
  }
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 16rpx 32rpx;
  padding-bottom: calc(68rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(68rpx + env(safe-area-inset-bottom));
  background: #fff;

  .fix-btn {
    width: 100%;
    font-size: 32rpx;
    font-weight: 700;
    color: #fff;
    background: #00d1b6;
    border-radius: 44rpx;
  }
}

.sports-result {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .sprots-btn-box {
    width: 100%;
    height: 88rpx;
    margin-top: 134rpx;
    padding: 0 96rpx;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}

.sports-result-content {
  display: flex;
  justify-content: center;
  width: 622rpx;
  height: 304rpx;
  flex-direction: column;
  margin-top: 110rpx;
  align-items: center;
  .sports-result-desc {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 16rpx;
  }

  .sports-desc {
    font-weight: 600;
    font-size: 40rpx;
    color: #222222;
  }
}
</style>
